<template>
	<div>
		<div class="swiper-size">
			<swiper :options="swiperOption">
			    <swiper-slide>
			    	<img  :src="swiperData[0]" alt="" class="mid">
			    	<router-link to="/layout" class="linkTo">立即体验</router-link>
			    </swiper-slide>
			    <swiper-slide>
			    	<img  :src="swiperData[1]" alt="" class="mid">
			    	<router-link to="/layout" class="linkTo">立即体验</router-link>
			    </swiper-slide>
			    <swiper-slide>
			    	<img  :src="swiperData[2]" alt="" class="mid">
			    	<router-link to="/layout" class="linkTo">立即体验</router-link>
			    </swiper-slide>
			    <div class="swiper-pagination"  slot="pagination"></div>
			</swiper>
		</div>
	</div>
</template>
<script>
	export default{
		name:"boot",
		data (){
			return{
				swiperData:[
				require("../assets/landscape/yindao_01.png"),
				require("../assets/landscape/yindao_02.png"),
				require("../assets/landscape/yindao_03.png"),
				],
				swiperOption: {
		          	pagination: {
					    el: '.swiper-pagination',
					},
					loop:true
		        }
			}
		}
	}
</script>
<style scoped lang="less">
	.mid{
		width: 100%;
	}
	.swiper-size {
		position: relative;
		width: 100%;
		height: 100%;
	}
	.swiper-size .linkTo{
		background-color: rgba(255,255,255,0.3);
		position: absolute;
		width: 330 /50rem;
		height:  70 /50rem;
		margin-left: 210 /50rem;
		font-size: 38 /50rem;
		text-align: center;
		line-height: 70 /50rem;
		border-radius: 30 /50rem;
		bottom: 80 /50rem;
		color:#000000;
	}
	.swiper-pagination{
		margin-bottom: 226 /50rem;
	}
</style>